<template>
  <el-dialog :visible.sync="visible" :title="!modeConfig ? '新增配置' : '修改配置'" :close-on-click-modal="false" :close-on-press-escape="false" width="60%">
    <el-form :model="dataForm"  ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="200px">
      <el-row :gutter="10">
        <el-col :sm="24" :md="24" :lg="24">
          <el-form-item prop="type" label="支付类型" size="mini">
            <el-radio-group v-model="dataForm.type" @change="typeChange" disabled>
              <!--<el-radio :label="1">现金</el-radio>-->
              <el-radio :label="2">支付宝</el-radio>
              <el-radio :label="3">微信</el-radio>
              <!--<el-radio :label="4">银联</el-radio>-->
              <!--<el-radio :label="5">POS机</el-radio>-->
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="mapList" :gutter="10">
        <el-col v-for="(item, index) in dataForm.payModeMap" :key="item.name" :sm="24" :md="24" :lg="24">
          <el-form-item :prop="'payModeMap.' + index +'.value'"  :label="item.name" style="margin-bottom: 15px" :rules="[{required: item.paymodType === '1' ? true : false, message: '不能为空' , trigger: 'blur' }]">
            <el-input v-model="item.value" @change="changeMap"></el-input>
            <span style="color: #999;line-height: 20px;" v-html="item.remarks">{{item.remarks}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      visible: false,
      merchantList: [],
      modeConfig: '',
      modeCodeList: [
        { modeCode: 'WX_APP', modeName: '微信手机原生APP支付' },
        { modeCode: 'WX_WAP', modeName: '微信移动网页支付' },
        { modeCode: 'WX_NATIVE', modeName: '微信公众号二维码支付' },
        { modeCode: 'WX_JSAPI', modeName: '微信公众号支付' },
        { modeCode: 'WX_MINI', modeName: '微信小程序支付' },
        { modeCode: 'ALI_APP', modeName: '支付宝手机原生APP支付' },
        { modeCode: 'ALI_WEB', modeName: '支付宝PC网页支付' },
        { modeCode: 'ALI_QRCODE', modeName: '支付宝内嵌二维码支付' },
        { modeCode: 'ALI_WAP', modeName: '支付宝移动网页支付' },
        { modeCode: 'UN_APP', modeName: '银联手机原生APP支付' },
        { modeCode: 'UN_WEB', modeName: '银联PC网页支付' },
        { modeCode: 'UN_WAP', modeName: '银联移动网页支付' },
        { modeCode: 'JD_WAP', modeName: '京东移动网页支付' },
        { modeCode: 'JD_WEB', modeName: '京东PC网页支付' },
        { modeCode: 'YEE_WAP', modeName: '易宝移动网页支付' },
        { modeCode: 'YEE_WEB', modeName: '易宝PC网页支付' },
        { modeCode: 'YEE_NOBANKCARDB', modeName: '易宝充值卡支付' },
        { modeCode: 'KUAIQIAN_WAP', modeName: '快钱移动网页支付' },
        { modeCode: 'KUAIQIAN_WEB', modeName: '快钱PC网页支付' },
        { modeCode: 'PAYPAL_LIVE', modeName: 'PAYPAL生产环境支付' },
        { modeCode: 'PAYPAL_SANDBOX', modeName: 'PAYPAL沙箱环境支付' },
        { modeCode: 'BD_APP', modeName: '百度手机原生APP支付' },
        { modeCode: 'BD_WAP', modeName: '百度移动网页支付' },
        { modeCode: 'BD_WEB', modeName: '百度PC网页支付' },
        { modeCode: 'BC_GATEWAY', modeName: '第三方网关支付' },
        { modeCode: 'BC_EXPRESS', modeName: '第三方快捷支付' },
        { modeCode: 'BC_APP', modeName: 'BC版手机APP支付' },
        { modeCode: 'BC_NATIVE', modeName: 'BC版微信二维码支付' },
        { modeCode: 'BC_WX_WAP', modeName: 'BC版微信手机WAP支付' },
        { modeCode: 'BC_WX_JSAPI', modeName: 'BC版微信公众号支付' },
        { modeCode: 'BC_ALI_QRCODE', modeName: 'BC版支付宝线下扫码支付' },
        { modeCode: 'BC_ALI_APP', modeName: 'BC版支付宝手机原生APP支付' },
        { modeCode: 'BC_ALI_WAP', modeName: 'BC版支付宝移动网页支付' },
        { modeCode: 'BC_ALI_WEB', modeName: 'BC版支付宝PC网页支付' },
        { modeCode: 'BC_WX_APP', modeName: 'BC版微信手机原生APP支付' },
        { modeCode: 'BC_ALI_JSAPI', modeName: 'BC版支付宝服务窗支付' },
        { modeCode: 'BC_WX_MINI', modeName: 'BC版微信小程序支付' }
      ],
      dataForm: {
        id: '',
        code: 'ALI',
        codeName: '支付宝',
        enabled: 1,
        isOnline: 1,
        merchantId: '',
        modeCode: '',
        aliPayConfigVO: {},
        wxPayConfigVO: {},
        modeDesc: '',
        modeName: '',
        terminal: '',
        type: 2
      },
      WX_config: {
        mpAppId: '',
        mpAppSecret: '',
        mchId: '',
        mchKey: '',
        notifyUrl: '',
        returnUrl: ''
      },
      Ali_config: {
        notifyUrl: '',
        returnUrl: '',
        appid: '',
        appPrivateKey: '',
        alipayPublicKey: ''
      },
      mapList: null,
      vxData: null
    }
  },
  computed: {
    dataRule () {
      return {
        mchKey: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        Promise.all([
          this.getMerchantList()
        ]).then(() => {
          if (this.dataForm.id) {
            this.getInfo()
          }
        })
      })
    },
    // 配置信息组合
    changeMap () {
      this.mapList.map(item => {
        var addValue = JSON.parse(`{"${item.key}":"${item.value}"}`)
        if (this.dataForm.type === 3) {
          // 微信
          this.dataForm.wxPayConfigVO = {
            ...this.dataForm.wxPayConfigVO,
            ...addValue
          }
        } else {
          // 支付宝
          this.dataForm.aliPayConfigVO = {
            ...this.dataForm.aliPayConfigVO,
            ...addValue
          }
        }
      })
    },
    // 选择支付方式
    typeChange (val) {
      if (val === 2) {
        this.dataForm.code = 'ALI'
        this.dataForm.codeName = '支付宝'
      } else {
        this.dataForm.code = 'WX'
        this.dataForm.codeName = '微信'
      }
    },
    // 获取客户行
    getMerchantList () {
      this.$http.get(`/tPaymode/merchantList`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.merchantList = res.data
      }).catch(() => {})
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/tPaymode/selectPaymodeId?modeId=${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = res.data
        this.dataForm.merchantId = this.$store.state.user.merchantId
        this.mapList = res.data.payModeMap
      }).catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http[!this.modeConfig ? 'post' : 'put'](!this.modeConfig ? '/tPaymode/add' : '/tPaymode/upd', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">
  .mod-sys__user {
    .dept-list {
      .el-input__inner,
      .el-input__suffix {
        cursor: pointer;
      }
    }
    .role-list {
      .el-select {
        width: 100%;
      }
    }
  }
  .el-form-item__content {
    line-height: 20px;
  }
  .el-form-item__error {
    padding-top: 0;
  }
</style>
